<template>
  <div style="height: 100%; width: 100%">
    <WujieVue
      class="item"
      name="vite"
      :url="vite"
      :sync="true"
      :props="{ data: 1111, methods: 22222 }"
      :plugins="plugins"
    ></WujieVue>
  </div>
</template>

<script>
import hostMap from "../../wujie-config/hostMap";

export default {
  data() {
    return {
      vite: hostMap("//localhost:3000/"),
      plugins: [
        {
          patchElementHook(element, iframeWindow) {
            if (element.nodeName === "STYLE") {
              element.insertAdjacentElement = function (_position, ele) {
                iframeWindow.document.head.appendChild(ele);
              };
            }
          },
        },
      ],
    };
  },
  methods: {
    jump(name) {
      this.$router.push({ name });
    },
  },
};
</script>

<style scoped>
.item {
  display: inline-block;
  border: 1px dashed #ccc;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  overflow: scroll;
}
</style>
